<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/4/11
  Time: 下午3:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="fsvs demo" lang="zh">
<head>
    <title>Title</title>
    <link href="/static/layui/css/weibo/style.css" rel="stylesheet">
    <script src=/static/layui/js/weibo/jquery-1.11.0.min.js></script>
    <script src="/static/layui/js/weibo/jquery-migrate-1.2.1.min.js"></script>
    <script src="/static/layui/js/weibo/bundle.js"></script>
    <script src="/static/layui/js/weibo/jquery.swipe-events.js"></script>
    <script src="/static/layui/js/weibo/prismjs.js"></script>
    <script src="/static/layui/js/weibo/fsvs.js"></script>
    <script src="/static/layui/js/weibo/main.js"></script>
</head>
<div id="fsvs-body">
    <div class="slide" id="fsvs-initial-setup">
        <h1 class="htmleaf-title">FSVS-jQuery和CSS3带过渡效果的全屏整页垂直滚动特效插件</h1>
        <p>Simple Full Screen Vertical Slider using CSS3 transitions followed up by a jQuery fallback. <br />Bound events support mousewheel, click and drag, arrow keys and touch gestures.</p>
        <div class="htmleaf-links">
            <a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
            <a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/jQuery/Layout-Interface/201503021446.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
        </div>
        <div>
                    <pre><code class="language-javascript">

                    </code></pre>
        </div>
    </div>
    <div class="slide" id="basic-html-setup">
        <h2>Basic HTML setup</h2>
        <div>
                    <pre><code class="language-php">

                    </code></pre>
        </div>

    </div>
    <div class="slide">
        <h2>Default Options</h2>
        <pre><code class="language-javascript">

    </code></pre>
    </div>
    <div class="slide">
        <h2>Load In New Slides On End</h2>
        <pre><code class="language-javascript">
$(document).ready( function() {
    var slider = $.fn.fsvs({
        ...
        endSlide : function(index) {
            $('&lt;div class="slide"&gt;&lt;h2&gt;Slide ' + (index+2) + '&lt;/h2&gt;&lt;/div&gt;').appendTo( $('body') );
            // reset the nth classes if you need it
            slider.nthClasses(3);
            // rebind pagination if you need it
            slider.addPagination();
        }
        ...
    });
});
</code></pre>
    </div>
    <div class="slide">
        <div class="related">
            <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
            <a href="http://www.htmleaf.com/jQuery/shijuecha/201412311044.html">
                <img src="img/1.jpg" width="300" alt="jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js"/>
                <h3>jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js</h3>
            </a>
            <a href="http://www.htmleaf.com/jQuery/Layout-Interface/20141219923.html">
                <img src="img/2.jpg" width="300" alt="jQuery和css3全屏翻页切换页面特效"/>
                <h3>jQuery和css3全屏翻页切换页面特效</h3>
            </a>
        </div>
    </div>
</div>
</body>
<script type="javascript">
    $(document).ready( function() {
        var slider = $.fn.fsvs({
            speed : 5000,
            bodyID : 'fsvs-body',
            selector : '> .slide',
            mouseSwipeDisance : 40,
            afterSlide : function(){},
            beforeSlide : function(){},
            endSlide : function(){},
            mouseWheelEvents : true,
            mouseWheelDelay : false,
            scrollableArea : 'scrollable',
            mouseDragEvents : true,
            touchEvents : true,
            arrowKeyEvents : true,
            pagination : true,
            nthClasses : false,
            detectHash : true
        });
        //slider.slideUp();
        //slider.slideDown();
        //slider.slideToIndex( index );
        //slider.unbind();
        //slider.rebind();
    });
</script>
</html>
